<template>
  <div
    flex
    justify-around
    items-center
    w-screen
    h-screen
    overflow-hidden
    relative
  >
    <swiper
      :current="swiperPage"
      circular
      :indicator-dots="false"
      :autoplay="false"
      :duration="300"
      w-screen
      h-screen
      @change="changeSwiper"
    >
      <swiper-item v-for="(item, index) in result" :key="item">
        <image mode="aspectFill" w-screen h-screen :src="item" />
      </swiper-item>
    </swiper>
    <!-- <nut-swiper
      :pagination-visible="false"
      :loop="true"
      ref="swiper"
      auto-play="0"
      @change="changeSwiper"
    >
      <nut-swiper-item v-for="(item, index) in result" :key="item">
        <img w-screen h-500rpx :src="item" />
      </nut-swiper-item>
    </nut-swiper> -->
    <div
      flex
      absolute
      w-965px
      h-144px
      top-29px
      rounded-full
      items-center
      bg="#fff"
      px-20px
      box-border
    >
      <div
        flex
        w-full
        h-144px
        rounded-full
        items-center
        bg="#fff"
        overflow-x-auto
      >
        <div
          v-for="item in areas"
          class="tab"
          shrink-0
          px-52px
          py-26px
          rounded-58px
          text="#000"
          text-40px
          :class="{ active: item.areaId === queryParams.areaId }"
          @click="switchArea(item.areaId)"
        >
          {{ item.areaName }}
        </div>
      </div>
    </div>
    <div
      flex
      flex-col
      absolute
      w-115px
      left-58px
      rounded-full
      items-center
      bg="#fff"
      py-20px
      box-border
    >
      <div
        grid
        grid-cols-1
        gap-29px
        place-items-center
        w-115px
        rounded-full
        items-center
        bg="#fff"
        overflow-x-auto
      >
        <div
          v-for="item in floors"
          class="tab"
          flex
          justify-center
          items-center
          shrink-0
          w-86px
          h-86px
          rounded-full
          text="#000"
          text-40px
          :class="{ active: item.floorId === queryParams.floorId }"
          @click="switchFloor(item.floorId)"
        >
          {{ item.floorName }}
        </div>
      </div>
    </div>
    <div
      flex
      justify-around
      items-center
      absolute
      w-619px
      h-144px
      bottom-58px
      rounded-full
      bg="#fff"
      px-20px
      box-border
    >
      <div
        bg="#FCC300"
        w-full
        h-115px
        rounded-full
        flex
        justify-between
        items-center
      >
        <div
          flex
          justify-center
          items-center
          w-115px
          h-115px
          @click="handlePrev"
        >
          <img w-26px h-43px src="@/static/left.png" />
        </div>
        <div text-46px font-500 text="#000">
          推荐路线({{ swiperPage + 1 }}/{{ result.length }})
        </div>
        <div
          flex
          justify-center
          items-center
          w-115px
          h-115px
          @click="handleNext"
        >
          <img w-26px h-43px src="@/static/right.png" />
        </div>
      </div>
    </div>
    <back></back>
  </div>
</template>

<script setup lang="ts">
import { getAllArea, getAllFloor, getVenueContent } from '@/api/index'
import { startRedirectToHome, stopRedirectToHome } from '@/utils/screenSaver'
const result = ref<Array<string>>([])

const swiperPage = ref<number>(0)
const swiper = ref<any>(null)
const queryParams = ref<{
  areaId: number
  floorId: number
}>({
  areaId: 0,
  floorId: 0
})
// 楼层数组
const floors = ref<Array<{ floorId: number; floorName: string }>>([])

// 区域数组
const areas = ref<Array<{ areaId: number; areaName: string }>>([])
function changeSwiper(e: any) {
  swiperPage.value = e.detail.current
  resetTimer()
}
function switchArea(areaId: number) {
  if (areaId !== queryParams.value.areaId) {
    queryParams.value.areaId = areaId
  }

  queryParams.value.areaId = areaId
  getList()
}
function switchFloor(floorId: number) {
  if (floorId !== queryParams.value.floorId) {
    queryParams.value.floorId = floorId
    getList()
  }
}

const handlePrev = () => {
  // swiper.value.prev()
  if (swiperPage.value == 0) {
    swiperPage.value = result.value.length - 1
  } else {
    swiperPage.value--
  }
}
const handleNext = () => {
  // swiper.value.next()
  if (swiperPage.value == result.value.length - 1) {
    swiperPage.value = 0
  } else {
    swiperPage.value++
  }
}

defineExpose({})
const resetTimer = () => {
  startRedirectToHome() // 重置跳转逻辑
}
function getList() {
  getVenueContent(queryParams.value).then((res: any) => {
    result.value = []
    swiperPage.value = 0
    result.value = res.data.data.map((i: any) => i.img)
  })
}
async function init() {
  Promise.all([getAllArea(), getAllFloor()])
    .then((responses) =>
      Promise.all(
        responses.map((res) => {
          return res?.data?.data || []
        })
      )
    )
    .then((results) => {
      areas.value = results[0].map((i: any) => ({
        areaId: i.areaId,
        areaName: i.areaName
      }))
      queryParams.value.areaId = areas.value[0].areaId

      floors.value = results[1].map((i: any) => ({
        floorId: i.floorId,
        floorName: i.floorName
      }))
      queryParams.value.floorId = floors.value[0].floorId
      getList()
    })
}
onMounted(() => {
  init()
  startRedirectToHome()
  // 监听用户操作事件
  document.addEventListener('click', resetTimer)
  document.addEventListener('touchstart', resetTimer)
})
onUnmounted(() => {
  stopRedirectToHome()
  // 移除用户操作事件监听
  document.removeEventListener('click', resetTimer)
  document.removeEventListener('touchstart', resetTimer)
})
</script>
<style>
page {
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
</style>
<style scoped>
/* 一行两列的样式 */
.row-1-col-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.tab {
  background: white;
  transition: background-color 0.4s ease;
}
.active {
  background-color: #fcc300;
}
</style>
